/**
 * 其他事项说明
 */

import { CSSProperties } from "react";
import StoreDemo from "./_components/StoreDemo";

interface Props {
  className?: string;
  style?: CSSProperties;
  [key: string]: any;
}

const list: [string, string][] = [
  [
    "文件夹/文件按模块、嵌套关系创建",
    "当某个模块移动或删除时，改动最小；维护时，组件关系清晰明了（下面的Store示例部分是这样的一个例子）",
  ],
  [
    "区分全局跟局部",
    "将文件或文件夹建在合适的位置，比如全局utils或局部的_utils，文件不能承载装下内容，就用文件夹装",
  ],
  [
    "遵循一个组件一个tsx文件原则，原则上单个tsx文件不超过500行",
    "有利于降低后期不断迭代维护难度",
  ],
  [
    "单一原则",
    "一个组件，一个方法只做一件事，本该属于哪个组件的逻辑，就写在哪个组件里",
  ],
  [
    "弹窗跟弹窗内部内容解耦",
    "通过openPopup(title,InnerComponent,'modal/drawer')和closePopup()显/隐弹窗，跟内部内容无关联（点击新增按钮，弹出Modal弹窗有代码示例）",
  ],
  [
    "跟use* hooks API无关的变量、函数统一提取到函数式组件外部书写",
    "减少重复渲染时的计算机执行开销",
  ],
  [
    "降低Redux使用心智负担",
    "封装useStoreSlice hooks，避免处处手动使用useSelector和dispatch（用法如下Store示例所示）",
  ],
  [
    "memo、useMemo、useCallback不能滥用",
    "当重复执行内部逻辑的性能开销高于创建useMemo，useCallback时，相对于useMemo，useCallback，JS创建函数的性能开销是很低的",
  ],
  ["简洁少量的的CSS代码", "布局（弹性布局基础类）和样式解耦"],
  ["其他", "……"],
];

export default ({ className = "", children, ...restProps }: Props) => {
  return (
    <div className={`${className} f-fs-s-c`} {...restProps}>
      <h1 className="mb-16 f-0">React开发最佳实践（个人总结）</h1>
      <ul
        className="f-1 hover-show-scroll"
        style={{ overflow: "auto", flexBasis: "1px" }}
      >
        {list.map(([key, val]: [string, string], ind: number) => {
          return (
            <li className="mb-4" key={ind}>
              {ind + 1}、<span>{key}</span>：
              <span style={{ color: "#aaa" }}>{val}</span>
            </li>
          );
        })}
      </ul>
      <h1 className="mt-16 mb-4 f-0">Store（Redux）三种使用方式示例</h1>
      <StoreDemo className="f-0" />
    </div>
  );
};
